<template>
	<view>
		<view class="smart-panel-head">
					<view class="smart-panel-head-title">Icon 图标组件</view>
				</view>
				
				<view class="padding-wrap">
					<view class="item-title">基础功能图标</view>
					<view class="icon-group">
						<view class="icon-item">
							<text class="uni-icon">&#xe408</text>
							<text class="icon-name">首页</text>
						</view>
						<view class="icon-item">
							<text class="uni-icon">&#xe40a</text>
							<text class="icon-name">购物车</text>
						</view>
						<view class="icon-item">
							<text class="uni-icon">&#xe40b</text>
							<text class="icon-name">我的</text>
						</view>
						<view class="icon-item">
							<text class="uni-icon">&#xe42c</text>
							<text class="icon-name">收藏</text>
						</view>
					</view>
		
					<view class="item-title">状态图标</view>
					<view class="icon-group">
						<view class="icon-item">
							<text class="uni-icon success">&#xe430</text>
							<text class="icon-name">成功</text>
						</view>
						<view class="icon-item">
							<text class="uni-icon error">&#xe431</text>
							<text class="icon-name">失败</text>
						</view>
						<view class="icon-item">
							<text class="uni-icon warn">&#xe432</text>
							<text class="icon-name">警告</text>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.panel-head {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	.panel-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	.padding-wrap {
		padding: 30rpx;
	}
	.item-title {
		margin: 30rpx 0 20rpx;
		font-size: 26rpx;
		color: #333;
	}

	/* 图标样式 */
	.uni-icon {
		font-family: uniicons;
		font-size: 36rpx;
	}
	.success { color: #00C853; }
	.error { color: #FF4444; }
	.warn { color: #FFBB33; }

	/* 图标布局 */
	.icon-group {
		display: flex;
		gap: 40rpx;
		flex-wrap: wrap;
	}
	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100rpx;
	}
	.icon-name {
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #666;
	}
</style>
